<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>AXL Tutorial: TranzAm</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- menu -->
	<div id="navmain">
	<ul>
		<li><a href="index.html">Overview</a></li>
		<li><a href="install.html">Installation</a></li>
		<li><a href="config.html">Configurator</a></li>
		<li><a href="animation.html">Animation</a></li>
		<li><a href="framework.html">Framework</a></li>
		<li><a href="tranzam.html">Tutorial</a></li>
	</ul>
	</div>
	<div id="navsub">
	<ul>
		<li><a href="tranzam.html">Start</a></li>
		<li><a href="tranzam_a1.html">Article 1</a></li>
		<li><a href="tranzam_a2.html">Article 2</a></li>
		<li><a href="tranzam_a3.html">Article 3</a></li>
		<li><a href="tranzam_a4.html">Article 4</a></li>
		<li><a href="tranzam_a5.html">Article 5</a></li>
		<li><a href="tranzam_a6.html">Article 6</a></li>
		<li><a href="tranzam_a7.html">Article 7</a></li>
		<li><a href="tranzam_a8.html">Article 8</a></li>
		<li><a href="tranzam_a9.html">Article 9</a></li>
		<li><a href="tranzam_a10.html">Article 10</a></li>
	</ul><span class="smallprint">This menu will stay fixed with a proper browser.</span>
	<p>
	 <a href="http://jigsaw.w3.org/css-validator/">
	  <img style="border:0;width:88px;height:31px"
		   src="http://jigsaw.w3.org/css-validator/images/vcss" 
		   alt="Valid CSS!" />
	 </a>
	</p>
	<p>
      <a href="http://validator.w3.org/check?uri=referer"><img
          src="http://www.w3.org/Icons/valid-xhtml10"
          alt="Valid XHTML 1.0!" height="31" width="88" /></a>
    </p>
<p><a href="http://www.bloggerheads.com/bbc/"><img src="http://www.bloggerheads.com/bbc/bbc.gif" width="90" height="45"  
alt="Click here to find out why." /></a></p>
<p><a href="http://retrospec.sgn.net" ><img src="retrospec.gif" width="150" alt="Fine games" /></a></p>
	</div>
<!-- menu -->

	<div id="main">
	<a name="files"></a>
<h1>Introduction</h1>
In the previous lesson we did quite a lot! everything from changing animations and modifying the timer loop to changing animations. 
This lesson we will focus on adding the radar to the Car's control panel.
<h1>Structure</h1>
If you are manually creating the project 
    make file then use the one from lesson 6, there are no changes.
    <br />The following files will be changed in this lesson:
    <ul>
    <li>game_vars.cpp: bitmaps to hold our radar will be added</li>
    <li>game_transam.cpp/h: The new bitmaps for the radar will be added</li>
    <li>game_game.cpp/h: The radar maps updated</li>
    <li>game_car.cpp : A few bugs fixed and the handbrake will make the car slide when turning</li>
    </ul>
	<a name="source1"></a>
<h1>Tranzam</h1>
<img src="images/tranzam_radar.jpg" alt="radar" style="float: right; padding-left: 10px;" />
In our game we will have two radar screens, as shown in the picture. The first will cover the entire map and 
will show the roads (the lines in orange), the petrol stations (the white dots) and the car (the red dot).
<br />
The local radar will show the car (in the centre) and the surround area (a few screens worth). On this map we will 
shown the enemy cars and the cups. As seen in the picture, there is a cup to the top right of the car.
<br />
Admittedly, the national map doesn't exactly look like North America, but that's because it was drawn in Mappy 
without actually thinking about it. The bitmap for this is stored in the transam.bmp file, alongside the little icons for the local 
radar.
<br />
The map was actually drawn from code, and can be seen commented out in game_game.cpp in the LoadLevel() function. It simply 
looped through every tile in the map file and if it was a 'sea' block a pixel was drawn (because the sea tiles are only drawn on the outside of the map). 
This was then reversed to produce the map.
<h1>Static Graphics</h1>
In the beginning we mentioned that there is a better way to load, store and use static graphics (i.e. those that 
do not have animations). A method of the Animation library, GetFirstGraphic(), takes an id (from the animations.xml file) 
as the parameter and returns back a BITMAP pointer. This is ideal for bitmaps that both have no animations and 
we will not be performing any Animation methods on it (e.g. countdown timers, faders, etc).
<h1>game_transam.cpp/h</h1>
In the header file, we set up our new BITMAP variables to hold the radar. We also create a new array to hold
the location of all the cups. We need this to determine whether to draw the cups on the local radar.
<br />
In the source file we update the SetupGame function to retrieve the static graphics using the GetFirstGraphic function, i.e. 
<div class="code">
LocalRadar	=GameLibrary->GetFirstGraphic("localradar");
</div>
Where LocalRadar is of type BITMAP*, and we repeat the same for the other static graphics (e.g. the small graphics used for the local 
radar).
<h1>Code Walkthrough of game_car.cpp/h</h1>
In our car code we want to fix a few bugs and improve the way the handbrake works by making the car slide
if the car is turning whilst holding down the handbrake.
<br />
To make the car turn when handbraking, we store the last angle of the car in a variable, lastangle, and update 
the car position using this angle. This is because when the car is turning we want to continue sliding in the 
same direction and not the one that the car is facing. Once the handbrake is released we revert to using the 'angle' variable.
<br />
Other changes are as follows:
<ul>
<li>A bug is fixed where the miles driven is not reset after restarting the game</li>
<li>The car's animation can be changed and isn't hard coded (e.g. so we can reuse the Car class to store the enemy cars)</li>
<li>The edge check inside NextMove() is removed as it is unnecessary now we have collision detection (the sea tiles will always stop the car)</li>
<li>Slight change to the speed of decrease when the handbrake is pressed</li>
<li>The new array to store the cup locations is updated if we have found a cup</li>
<li>Fuel is increased by more when you go over the fuel tile</li>
</ul>
<strong>Note:</strong> You can find all these changes by using a visual differencing tool such as WinMerge.
<h1>Code Walthrough of game_game.cpp</h1>
The code is to be altered to draw the local and national radar maps, as well as a few tweaks here and there. First the tweaks:
<ul>
<li>When the player loses a life we will draw a gravestone to mark the spot. This will become a collision tile like the cactus, etc. Within the TransAmGameLogic code (the section that checks if the player has lost a life), 
we update the map to add a grave tile using <span class="code">MapSetBlock(Player->mapx/mapblockwidth,(int)Player->mapy/mapblockheight,GraveBlockNumber);</span></li>
<li>We remove the code to check if the player has reached the end of the map as, for the same reason we mentioned in the Car class, we can now rely on the player rebounding when the sea is reached.</li>
<li>The speedometer dial is updated to fix a bug when the car is on the road tile</li>
<li>In the InitialiseLevel() function we reset the starting location block to be a blank tile. This is just in case
the player dies here and a grave tile is placed</li>
<li>The Cup Location array is updated with a third element to show if it has been found</li>
<li>The method of drawing the number of lives left (within TransAmGameDrawing) is optimised to be a loop rather than three separate statements</li>
</ul>
In the InitialiseLevel() function we need to update the local and national radar. The local radar is simply created as a new bitmap, cleared and drawn onto the Panel. 
When the bitmap is created we need to know if we are using memory, system or video bitmaps.
<br />
The national map is drawn as follows:
<div class="code">
BLKSTR* tmp;
for(int y=0;y&lt;mapheight;y++)
{
	for(int x=0;x&lt;mapwidth;x++)
	{
		tmp=MapGetBlock(x,y);
		if(tmp-&gt;unused2)	//road
			putpixel(localMap,x/LocalMapScale,y/LocalMapScale,makecol(229,167,1));
		if(tmp-&gt;unused1)	//petrol
			putpixel(localMap,x/LocalMapScale,y/LocalMapScale,makecol(255,255,255));
	}
}
</div>
This loops through the whole tile map and where a road or petrol tile is found, it is drawn on the bitmap we 
generated to show the map. LocalMapScale is a constant we found as the size ratio between the bitmap we are drawing to 
and the actual size of the tile map.
<br />
Within TransAmGameDrawing function we need to update the local and national radar. 
<br />
Using the same LocalMapScale constant we draw the player on the national map. The mapx/mapy variables
store the car's location in pixels so we translate that to tile location and divide by the scale, then use a rectangle fill to draw the player:
<div class="code">
newx=(((int)Player->mapx/mapblockwidth)/LocalMapScale);
newy=(((int)Player->mapy/mapblockheight)/LocalMapScale);
rectfill(GameFramework->DrawingSurface,LocalMapX+newx,LocalMapY+newy,LocalMapX+newx+1,LocalMapY+newy+1,makecol(255,0,0));
</div>
The local radar is updated by looping through the Cup array and seeing if the player is within a set number of tiles of it.
We are translating 1 pixel to 1 tile and so the local radar shows <span class="code">int offset=LocalRadar->w/2</span> tiles, which 
is approximately 40 pixels. Assuming there are about 15 tiles on screen this is about 3 screens worth of information.
The code then checks each cup's location against the player's and draws the cup on the screen if within range:
<div class="code">
if(!CupPositions[n][2] &amp;&amp; abs(xoff)&lt;offset &amp;&amp; abs(yoff)&lt;offset)
</div>
We are drawing these to temporary bitmaps so we can blank them every frame.
<h1>Allegro</h1>
Just to recap, we've added the local and national radar using the data from our tile map, made a few tweaks and learnt how 
to retrieve static bitmaps without the overhead of the Animation class.<br />
So, all that remains is to compile the code and try out the game.
<h1>Next</h1>
The next lesson will be will be adding the enemy cars, but not moving them. The lesson after that we will be
learning about the A* path finding algorithm so that we can make the enemy cars chase the player.
<br /></div>
</body>
</html>
